<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div class="home-container">
    <div class="welcome-section">
      <h1 class="welcome-title">
        <el-icon class="title-icon"><Setting /></el-icon>
        任务管理系统
      </h1>
      <p class="welcome-subtitle">
        高效、可靠的任务调度和管理平台
      </p>
    </div>

    <div class="feature-grid">
      <el-card
        class="feature-card"
        shadow="hover"
        @click="navigateTo('/job-management')"
      >
        <div class="feature-icon">
          <el-icon><List /></el-icon>
        </div>
        <div class="feature-content">
          <h3>任务管理</h3>
          <p>查看和管理所有任务，包括任务状态、调度配置等</p>
        </div>
      </el-card>

      <el-card
        class="feature-card"
        shadow="hover"
        @click="navigateTo('/job-management')"
      >
        <div class="feature-icon">
          <el-icon><VideoPlay /></el-icon>
        </div>
        <div class="feature-content">
          <h3>任务执行</h3>
          <p>手动触发任务执行，实时监控任务运行状态</p>
        </div>
      </el-card>

      <el-card
        class="feature-card"
        shadow="hover"
        @click="navigateTo('/job-management')"
      >
        <div class="feature-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="feature-content">
          <h3>执行日志</h3>
          <p>查看任务执行历史记录和详细日志信息</p>
        </div>
      </el-card>

      <el-card
        class="feature-card"
        shadow="hover"
        @click="navigateTo('/about')"
      >
        <div class="feature-icon">
          <el-icon><InfoFilled /></el-icon>
        </div>
        <div class="feature-content">
          <h3>系统信息</h3>
          <p>了解系统版本、功能特性和使用说明</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  width: 80vw;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 48px;
}

.welcome-title {
  font-size: 36px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-icon {
  margin-right: 12px;
  color: #409eff;
  font-size: 36px;
}

.welcome-subtitle {
  font-size: 18px;
  color: #909399;
  margin: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.feature-card {
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  padding: 24px;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: linear-gradient(135deg, #409eff 0%, #722ed1 100%);
  color: white;
  font-size: 48px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.feature-card:nth-child(2) .feature-icon {
  background: linear-gradient(135deg, #67c23a 0%, #13c2c2 100%);
}

.feature-card:nth-child(3) .feature-icon {
  background: linear-gradient(135deg, #e6a23c 0%, #f56c6c 100%);
}

.feature-card:nth-child(4) .feature-icon {
  background: linear-gradient(135deg, #722ed1 0%, #eb2f96 100%);
}

.feature-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.feature-content p {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}
</style>
